<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="card">
            <image src="../../static/image/bg.png" class="c-bg"></image>
            <view class="c-info">
                <view>
                    <view class="u-flex">
                        <image src="../../static/icon/price.png" class="price-icon"></image>
                        <view>我的余额（元）</view>
                    </view>
                    <view class="price">￥<text class="price-num">{{data.balance}}</text></view>
                </view>
                <view class="c-btn" @click="$gTo(`/pages/recharge/recharge-list`)">充值明细</view>
            </view>
        </view>
        
        <view class="wrapper" v-if="data&&data.recharge&&data.recharge.length > 0">
            <view class="box">
                <view class="item" :class="{active : item.isSelect}" v-for="(item, index) in data.recharge" :key="index"
					@click="choose(item)">
                    <image src="../../static/icon/choose_04.png" class="choose-04" v-if="item.isSelect"></image>
                    <view>
                        {{item.money}}<text class="u-font-36">元</text>
                    </view>
                    <view class="give" v-if="item.coupon_num > 0">赠送发货券共{{item.coupon_money}}元</view>
                </view>
            </view>
            <view class="btn" @click="$noMultipleClicks(doPay)">立即充值</view>
			
            <view class="tip"  @click="agree">
				<view class="frame" :class="act ? 'activeIcon' : ''">
				    <u-icon name="checkbox-mark" color="#ff4800" size="30" v-if="act"></u-icon>
				</view>
                我已阅读并同意
				<text class="tip-rule" @click.stop="show = true">《充值条款》</text>
            </view>
        </view>
		
		<u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">充值条款</view>
		        <view>
		            <scroll-view :scroll-y="true" style="height: 800rpx;">
		                <view>
		                    <u-parse :html="content"></u-parse>
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
                data: {},
				show: false,
				content: '',
				act: false,
            };
        },
        onLoad() {
            this.getRule()
        },
		onShow() {
			this.getData()
		},
        methods: {
			agree() {
			    this.act = !this.act
			    console.log('act',this.act)
			},
			
			doPay() {
				if (this.act == false) {
				    this.$toast('请先同意充值条款！');
				    return
				}
				
				let rid
				this.data.recharge.forEach(ii => {
				    if (ii.isSelect) {
						rid = ii.id
					}
				})
				
				this.$ajax('submit_recharge', {
					user_token: this.$getSync('userToken'),
					recharge_id: rid,//充值id
				}).then(ret => {
					if (ret.success == 1000) {
						this.$gTo(`/pages/pay/pay?id=${ret.detail.order_id}&money=${ret.detail.order_amount}&from=1`)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			choose(item) {
				const nowStatu = item.isSelect
				this.data.recharge.forEach(ii => {
				    ii.isSelect = false
				})
				item.isSelect =! nowStatu
				
				this.show = false
			},
			
            getData() {
            	this.$ajax('user_recharge', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
						this.data = ret.detail
						if (this.data.recharge && this.data.recharge.length > 0) {
							this.data.recharge.forEach((cur,index) => {
								if (index == 0) {
									this.$set(cur, 'isSelect', true)
								} else {
									this.$set(cur, 'isSelect', false)
								}
							})
						}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
			
			getRule() {
			    this.$ajax('select_rules', {
			        user_token: this.$getSync('userToken'),
					type: 3,//1计算规则 2电子运单契约条款及隐私政策 3充值条款
			    }).then(ret => {
			        this.content = ret.detail.rules
			    });
			},
        }
    };
</script>

<style lang="scss">
	.pop-box-cou{
	    padding: 0 30rpx;
	}
	.pop-title{
	    font-size: 34rpx;
	    font-weight: bold;
	    text-align: center;
	    padding: 30rpx;
	}
    
    page{
        background-color: #fff;
    }
    .bg {
    	width: 100%;
    	height: 450rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background-color: #004580;
    }
    .card{
        padding: 35rpx 29rpx;
        position: relative;
    }
    .c-bg{
        width: 691rpx;
        height: 263rpx;
    }
    .c-info{
        width: 600rpx;
        font-size: 24rpx;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 100rpx;
        left: 80rpx;
    }
    .price-icon{
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
    }
    .price{
        font-size: 42rpx;
    }
    .price-num{
        font-size: 70rpx;
    }
    .c-btn{
        font-size: 26rpx;
        color: #004580;
        padding: 15rpx 30rpx;
        background: linear-gradient(110deg,#cfe8fe,#f7fbfe,#ddf0fe);
        border-radius: 50rpx;
    }
    .wrapper{
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0;
        padding: 80rpx 30rpx;
    }
    
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .item{
        width: 330rpx;
        height: 155rpx;
        border: 2rpx solid #dfdfdf;
        background-color: #fff;
        border-radius: 15rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 40rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
    }
    .item:nth-child(2n){
        margin-right: 0;
    }
    .active{
        border: 2rpx solid #ff5f2b;
        background-color: #fffaf9;
        color: #ff5f2b;
    }
    .choose-04{
        width: 56rpx;
        height: 36rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .give{
        font-size: 24rpx !important;
        color: #959595 !important;
        padding-top: 5rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin: 60rpx 0 30rpx;
    }
	.frame {
	    width: 33rpx;
	    height: 33rpx;
	    border-radius: 50%;
	    border: 1rpx solid #cdcdcd;
	    position: relative;
	    margin-right: 12rpx;
	    margin-top: 4rpx;
	
	    /deep/ u-icon {
	        transform: scale(0);
	        position: absolute;
	        top: -7%;
	        left: -2%;
	    }
	}
	
	.activeIcon {
	    /deep/ u-icon {
	        transform: scale(1);
	    }
	}
    .tip{
		display: flex;
		justify-content: center;
		align-items: center;
        // text-align: center;
        font-size: 24rpx;
        color: #959595;
    }
    .tip-rule{
        color: #000;
    }
    
    

</style>
